<!--新增复印申请-->
<script setup>

import {onMounted, ref} from "vue";
import {Upload} from "@element-plus/icons-vue";
import qs from "qs";
import axios from "axios";
import {ElMessage} from "element-plus";
import router from "@/router";
import _ from "lodash";

//开局
onMounted(()=>{
  let breadcrumbData=["病案复印管理","住院病案复印管理","新建复印申请"];
  localStorage.setItem('breadcrumb', JSON.stringify(breadcrumbData));
  getCaseList();
  getContentList();
  getPurposeList();
})

//表单数据
const formData=ref({
  id:'',
  status:'0',
  admissionId:'',
  caseId:'',
  agentRelation:'',
  agentName:'',
  agentCertType:'',
  agentCertNum:'',
  agentPhone:'',
  authorizeType:'',
  copyNum:'',
  usageId:'',
  copyContentArr:[],
  copyInfo:'',
  pickupType:'0',
  pickupName:'',
  pickupPhone:'',
  payType:'',
  pickupAddr:''
})
//病案号名单
const caseList=ref([]);
//复印内容名单
const contentList=ref([]);
//复印用途名单
const purposeList=ref([]);
//当前住院号对应患者信息
const patientInfo=ref({
  id:'',
  caseId:'',
  name:'',//这条没有
  idCardType:'',//这条没有
  idCardId:'',
  phone:'',//这条没有
  intoDate:'',
  outDate:''
})

//获取病案号名单
const getCaseList=()=>{
  axios.get(getBaseURL(5)+"/v1/hospitalization/hspt/select").then((response)=>{
    if(response.data.code==2000){
      for(let i=0;i<response.data.data.length;i++){
        caseList.value.push(response.data.data[i].id);
      }
    }
  })
}
//获取患者基本信息，路由不对回头改
const getPatientInfo=(id)=>{
  let param=qs.stringify({id:id})
  axios.get(getBaseURL(5)+"/v1/hospitalization/hspt/select?"+param).then((response)=>{
    if(response.data.code==2000){
      patientInfo.value=response.data.data[0];
    }
  })
}
//获取复印内容表
const getContentList=()=>{
  axios.get(getBaseURL(1)+"/v1/duplicate/copy_content/select").then((response)=>{
    if(response.data.code==2000){
      contentList.value=response.data.data;
    }
  })
}
//获取复印用途，从表里拿value，从字典拿label
const getPurposeList=()=>{
  //先拿value列表
  let purposeValue=ref([]);
  axios.get(getBaseURL(1)+"/v1/duplicate/copy_purpose/select").then((response)=>{
    if(response.data.code==2000){
      purposeValue.value=response.data.data;
      console.log(purposeValue.value);
      //再拿label列表
      let purposeOption=ref([]);
      let query=qs.stringify({dictType:'print_type'});
      axios.get(getBaseURL(4) + '/v1/medical/medicalSystem/selectDictDetail/?'+query).then((response)=>{
        if(response.data.code==2000){
          purposeOption.value=response.data.data;
          //整理到实际列表里
          for(let i=0;i<purposeValue.value.length;i++){
            let item={};
            item=purposeValue.value[i];
            for(let t=0;t<purposeOption.value.length;t++) {
              if (purposeValue.value[i].purposeId ==purposeOption.value[t].dictValue){
                item.label=purposeOption.value[t].dictLabel;
                break;
              }
            }
            purposeList.value.push(item);
          }
          console.log(purposeList.value);
        }
        else(ElMessage.error(response.data.msg));
      })
    }
    else ElMessage.error(response.data.msg);
  })
}
//自动推荐复印内容
const autoContent=()=>{
  for(let purpose=0;purpose<purposeList.value.length;purpose++){
    console.log(formData.value.usageId);
    if(purposeList.value[purpose].id==formData.value.usageId){
      console.log(purposeList.value[purpose]);
      let data=_.cloneDeep(purposeList.value[purpose].recommend);
      formData.value.copyContentArr=data;
    }
  }
}

//保存表单
const saveDuplicate=()=>{
  formData.value.caseId=patientInfo.value.caseId;
  formData.value.admissionId=patientInfo.value.id;
  let data=qs.stringify(formData.value);
  axios.post(getBaseURL(1)+"/v1/duplicate/medical_duplicate/insert",data).then((response)=>{
    if(response.data.code==2000){
      ElMessage.success("新增成功！");
      router.push("/duplicate/medicalDuplicate/manage");
    }
    else ElMessage.error(response.data.msg);
  })
}
</script>

<template>
    <div class="common-layout">
      <el-container style="width: 90%;position: relative;margin: 0 auto;background-color:#fff;">
        <el-main>
          <!--患者信息表单-->
          <el-form label-width="110px" style="padding-left: 0;">
            <el-row :gutter="20" style="margin-bottom: 20px;">
              <el-col :span="24" style="height:45px;
                                        padding-left: 20px;
                                        line-height: 45px;
                                        background-color:#F0F2F5;
                                        font-size: 15px;
                                        font-weight: bold;
                                        text-align: left;">患者信息
              </el-col>
            </el-row>

            <el-row :gutter="20" style="margin-bottom: 20px;padding:0 20px;text-align: center;">
              <el-col :span="8">
                <el-form-item label="申请类型">
                  <el-radio-group v-model="formData.status">
                    <el-radio-button label="本人办理" value="0"/>
                    <el-radio-button label="代理人办理" value="1"/>
                  </el-radio-group>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="20" style="margin-bottom: 20px;padding:0 20px;text-align: center;">
              <el-col :span="8">
                <el-form-item label="住院号">
                  <el-select style="width:200px;" filterable placeholder="请输入住院号" v-model="formData.admissionId" @change="getPatientInfo(formData.admissionId)">
                    <el-option v-for="item in caseList" :value="item"/>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="病案号">
                  <el-input disabled style="width: 200px;" placeholder="请输入" v-model="patientInfo.caseId"/>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="20" style="margin-bottom: 20px;padding:0 20px;text-align: center;">
              <el-col :span="8">
                <el-form-item label="患者姓名">
                  <el-input disabled style="width: 200px" placeholder="请输入" v-model="patientInfo.name"/>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="证件类型">
                  <!--这里读取字典项的证件类型-->
                  <el-select style="width: 200px;" disabled default-first-option v-model="patientInfo.idCardType">
                    <el-option label="身份证" value="0"></el-option>
                    <el-option label="户口本" value="1"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="证件号">
                  <el-input disabled style="width: 200px" placeholder="请输入" v-model="patientInfo.idCardId"/>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="20" style="margin-bottom: 20px;padding:0 20px;text-align: center;">
              <el-col :span="8">
                <el-form-item label="本人电话" v-model="patientInfo.phone">
                  <el-input disabled style="width: 200px" placeholder="请输入"/>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="入院时间">
                  <el-date-picker disabled type="date" style="width: 200px" placeholder="年/月/日" v-model="patientInfo.intoDate"/>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="出院时间">
                  <el-date-picker disabled type="date" style="width: 200px" placeholder="年/月/日" v-model="patientInfo.outDate"/>
                </el-form-item>
              </el-col>
            </el-row>

            <!--仅选择代理人办理时出现-->
            <div v-if="formData.status==1">
              <el-row :gutter="20" style="margin-bottom: 20px;padding:0 20px;text-align: center;">
                <el-col :span="8">
                  <el-form-item label="代办人关系">
                    <el-select style="width: 200px;" default-first-option v-model="formData.agentRelation">
                      <el-option label="亲属" value="0"/>
                      <el-option label="朋友" value="1"/>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="代办人姓名">
                    <el-input style="width: 200px" placeholder="请输入" v-model="formData.agentName"/>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="代办人证件类型">
                    <el-select style="width: 200px;" default-first-option v-model="formData.agentCertType">
                      <el-option label="身份证" value="0"></el-option>
                      <el-option label="户口本" value="1"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row :gutter="20" style="margin-bottom: 20px;padding:0 20px;text-align: center;">
                <el-col :span="8">
                  <el-form-item label="代办人证件号">
                    <el-input style="width: 200px" placeholder="请输入" v-model="formData.agentCertNum"/>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="代办人电话">
                    <el-input style="width: 200px" placeholder="请输入" v-model="formData.agentPhone"/>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="委托书类型">
                    <el-select style="width: 200px;" default-first-option v-model="formData.authorizeType">
                      <el-option label="电子版" value="0"></el-option>
                      <el-option label="纸质版" value="1"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <!--照片上传-->
              <el-row :gutter="20" style="margin-bottom: 20px;padding:0 20px;text-align: center;">
                <el-col :span="8">
                  <el-form-item label="委托书">
                    <el-upload :limit="1">
                      <el-button>
                        <el-icon size="20"><Upload/></el-icon>
                        &nbsp本地上传
                      </el-button>
                    </el-upload>
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
          </el-form>
          <!--复印信息表单-->
          <el-form label-width="110px">
            <el-row :gutter="20" style="margin-bottom: 20px;">
              <el-col :span="24" style="height:45px;
                                        padding-left: 20px;
                                        line-height: 45px;
                                        background-color:#F0F2F5;
                                        font-size: 15px;
                                        font-weight: bold;
                                        text-align: left;">复印信息
              </el-col>
            </el-row>

            <el-row :gutter="20" style="margin-bottom: 20px;padding:0 20px;text-align: center;">
              <el-col :span="8">
                <!--需要校验不超过最大值-->
                <el-form-item label="复印份数">
                  <el-input style="width: 200px" placeholder="请输入" v-model="formData.copyNum"/>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="复印用途">
                  <el-select style="width: 200px;" default-first-option v-model="formData.usageId">
                    <el-option v-for="item in purposeList" :value="item.id" :label="item.label"/>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item>
                  <el-button @click="autoContent">自动推荐复印内容</el-button>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="20" style="margin-bottom: 20px;padding:0 20px;text-align: center;">
              <el-col :span="24">
                <el-form-item label="复印内容">
                  <!--这里读表-->
                  <el-checkbox-group v-model="formData.copyContentArr">
                    <el-checkbox v-for="item in contentList" :label="item.name" :value="item.id"/>
                  </el-checkbox-group>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="20" style="margin-bottom: 20px;padding:0 20px;text-align: center;">
              <el-col :span="24">
                <el-form-item label="备注">
                  <el-input type="textarea" placeholder="请输入" :rows="3" maxlength="100" show-word-limit v-model="formData.copyInfo"/>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <!--取件方式表单-->
          <el-form label-width="110px">
            <el-row :gutter="20" style="margin-bottom: 20px;">
              <el-col :span="24" style="height:45px;
                                        padding-left: 20px;
                                        line-height: 45px;
                                        background-color:#F0F2F5;
                                        font-size: 15px;
                                        font-weight: bold;
                                        text-align: left;">取件方式
              </el-col>
            </el-row>

            <el-row :gutter="20" style="margin-bottom: 20px;padding:0 20px;text-align: center;">
              <el-col :span="8">
                <el-form-item label="领取方式">
                  <el-select style="width: 200px;" default-first-option v-model="formData.pickupType">
                    <el-option label="现场领取" value="0"/>
                    <el-option label="邮寄" value="1"/>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <!--仅选择邮寄时才出现-->
            <div v-if="formData.pickupType==1">
              <el-row :gutter="20" style="margin-bottom: 20px;padding:0 20px;text-align: center;">
                <el-col :span="8">
                  <el-form-item label="取件人姓名">
                    <el-input style="width: 200px;" placeholder="请输入" v-model="formData.pickupName"/>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                <el-form-item label="联系电话">
                  <el-input style="width: 200px;" placeholder="请输入" v-model="formData.pickupPhone"/>
                </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="支付方式">
                    <el-select style="width: 200px;" default-first-option v-model="formData.payType">
                      <el-option label="到付" value="0"/>
                      <el-option label="线上支付" value="1"/>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row :gutter="20" style="margin-bottom: 20px;padding:0 20px;text-align: center;">
                <el-col :span="24">
                  <el-form-item label="邮寄地址">
                    <el-input placeholder="请输入" v-model="formData.pickupAddr"/>
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
          </el-form>
        </el-main>
        <!--底部按钮-->
        <el-footer>
          <el-button type="primary" style="float: right;margin-left: 10px;" @click="saveDuplicate">保存</el-button>
          <el-button style="float: right;">重置</el-button>
        </el-footer>
      </el-container>
    </div>
</template>

<style scoped>

</style>